<template>
  <div class="list-content" v-if="isShow">
    <div class="filter-area">
      <div class="operate-area">
        <el-button @click="exp" plain type="success" size="mini"
          >导出</el-button
        >
      </div>
    </div>
    <div class="table-title">
      <span></span>
      <h5>活动销售统计列表</h5>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      size="mini"
      v-if="hackReset"
    >
      <el-table-column type="index" width="50" align="center">
      </el-table-column>
      <el-table-column prop="activityName" label="活动名称" align="center">
      </el-table-column>
      <el-table-column prop="activityTime" label="活动场次" align="center">
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单数" align="center">
      </el-table-column>
      <el-table-column prop="saleAmount" label="销售总额（元）" align="center">
      </el-table-column>
      <el-table-column
        prop="paidInAmount"
        label="实收金额（元）"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="discountMoneyAmount"
        label="折扣金额（元）"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="writeoffAmount" label="核销笔数" align="center">
      </el-table-column>
    </el-table>
    <page
      :nowPage="nowPage"
      :total="total"
      :limit="limit"
      @pageChange="onPageChange"
      @sizeChange="onSizeChange"
      v-if="pageReset"
    />
  </div>
</template>
<script>
import page from "@c/page";
import {
  activityStatisticsApi,
  exportExcelActivityStatisticsApi
} from "@s/api";
export default {
  name: "tableCom",
  data() {
    return {
      isShow: false,
      pageReset: true,
      nowPage: 1,
      total: 0,
      limit: 10,
      hackReset: true,
      form: {
        activityIds: ""
      },
      tableData: []
    };
  },
  props: ["activityIds"],
  components: {
    page
  },
  mounted() {},
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    exp() {
      if (this.form.activityIds) {
        let json = {
          orderType: "1", // 餐饮
          activityIds: this.form.activityIds.join(",")
        };
        exportExcelActivityStatisticsApi(json, "餐饮活动销售统计信息表").then(
          () => {}
        );
      }
    },
    getInitList() {
      this.nowPage = 1;
      this.limit = 10;
      this.pageReset = false;
      this.$nextTick(() => {
        this.getList();
        this.pageReset = true;
      });
    },
    getList() {
      let json = {
        page: this.nowPage,
        limit: this.limit,
        orderType: "1", // 餐饮
        activityIds: this.form.activityIds.join(",")
      };
      activityStatisticsApi(json).then(res => {
        this.hackReset = false;
        this.$nextTick(() => {
          this.tableData = res.list;
          this.total = res.total;
          this.hackReset = true;
        });
      });
    }
  },
  watch: {
    activityIds(val) {
      if (val.length > 0) {
        this.isShow = true;
        this.form.activityIds = val;
        this.getInitList();
      } else {
        this.isShow = false;
      }
    }
  }
};
</script>
<style scoped lang="scss">
.list-content {
  margin: 0px !important;
}
</style>
